import {View, Button, Text, Image, ScrollView} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './checkTab.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import checkTabStripIcon from '@/assets/image/member/checkTabStrip_icon.png';
import checkTabStripTriangle from '@/assets/image/indexPage/checkTabStrip_triangle.png';
import chijingRight from '@/assets/image/index/renewalMember/chijingRight.png';
import chijingLeft from '@/assets/image/index/renewalMember/chijingLeft.png';
import lanjingRight from '@/assets/image/index/renewalMember/lanjingRight.png';
import lanjingLeft from '@/assets/image/index/renewalMember/lanjingLeft.png';
import shuangChongCenter from '@/assets/image/indexPage/shuangChongCenter.png';
import lanjingLogo from '@/assets/image/index/renewalMember/lanjing-logo.png';
import chijingLogo from '@/assets/image/member/chijing-logo.png';
interface ComponentState {
  checkTabType?: 'lanjing' | 'chijing' | 'shuangchong';
}

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }
  setCheckTab(e: number, checkTabType: ComponentState['checkTabType']) {
    let {
      actions: {action},
    } = this.props;
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return;
    }

    action.commonChange('main.checkTab', e);
    action.commonChange('main.selectMemberCard', checkTabType);

    if (checkTabType == 'lanjing') {
      // action.commonChange('main.isAquamarineMember', true);
      // action.commonChange('main.isCrystalMember', false);
    } else if (checkTabType == 'chijing') {
      // action.commonChange('main.isAquamarineMember', false);
      // action.commonChange('main.isCrystalMember', true);
    } else if (checkTabType == 'shuangchong') {
      // action.commonChange('main.isAquamarineMember', true);
      // action.commonChange('main.isCrystalMember', true);
    }
    action.commonChange('main.pageNum', 0);
    action.findMarketingcontentPage();
  }
  lanjingLeft() {
    const {memberCardType, lanjingLength, checkTab} = this.props.main;
    return (
      <View
        onClick={() => this.setCheckTab(0, 'lanjing')}
        className={`checkTab-left checkTabStrip-lanjing  ${checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-lanjing-text">
          {memberCardType !== 'noMember' && <Image src={lanjingLogo} className="memberLogo" />}
          蓝晶会员
          {memberCardType == 'noMember' && (
            <Text className="noMember-rightText">
              <Text className="noMember-rightTextNumber">{lanjingLength}</Text>项
            </Text>
          )}
        </View>
        <Image src={lanjingLeft} className="gropundImage" />
      </View>
    );
  }
  lanjingRight() {
    const {memberCardType, lanjingLength, checkTab} = this.props.main;
    return (
      <View
        onClick={() => this.setCheckTab(1, 'lanjing')}
        className={`checkTab-right checkTabStrip-lanjing ${checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-lanjing-text">
          {memberCardType !== 'noMember' && <Image src={lanjingLogo} className="memberLogo" />}
          蓝晶会员
          {memberCardType == 'noMember' && (
            <Text className="noMember-rightText">
              <Text className="noMember-rightTextNumber">{lanjingLength}</Text>项
            </Text>
          )}
        </View>
        <Image src={lanjingRight} className="gropundImage" />
      </View>
    );
  }
  chijingLeft() {
    const {memberCardType, chijingLength, checkTab} = this.props.main;

    return (
      <View
        onClick={() => this.setCheckTab(0, 'chijing')}
        className={`checkTab-left checkTabStrip-chijing  ${checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-chijing-text">
          {memberCardType !== 'noMember' && <Image src={chijingLogo} className="memberLogo" />}
          赤晶会员
          {memberCardType == 'noMember' && (
            <Text className="noMember-rightText">
              <Text className="noMember-rightTextNumber">{chijingLength}</Text>项
            </Text>
          )}
        </View>
        <Image src={chijingLeft} className="gropundImage" />
      </View>
    );
  }
  chijingRight() {
    const {memberCardType, chijingLength, checkTab} = this.props.main;
    return (
      <View
        onClick={() => this.setCheckTab(1, 'chijing')}
        className={`checkTab-right checkTabStrip-chijing ${checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-chijing-text">
          {memberCardType !== 'noMember' && <Image src={chijingLogo} className="memberLogo" />}
          赤晶会员
          {memberCardType == 'noMember' && (
            <Text className="noMember-rightText">
              <Text className="noMember-rightTextNumber">{chijingLength}</Text>项
            </Text>
          )}
        </View>
        <Image src={chijingRight} className="gropundImage" />
      </View>
    );
  }
  shuangchong() {
    return (
      <View className="checkTab-shuangchong">
        <Image
          src={shuangChongCenter}
          style={{
            width: '54rpx',
            height: '44rpx',
          }}
        ></Image>
        R-CLUB双会员
      </View>
    );
  }

  render() {
    let {
      main: {memberCardType, lanjingLength, chijingLength, checkTab, selectMemberCard, shaungchongLength},
      actions: {action},
    } = this.props;
    let memberName = '';
    let memberNum = 0;
    memberName = selectMemberCard === 'lanjing' ? '蓝晶' : '赤晶';
    memberNum = selectMemberCard === 'chijing' ? chijingLength : lanjingLength;
    if (memberCardType === 'shuangchong') {
      memberName = '双重';
      memberNum = parseInt(`${shaungchongLength}`);
      // parseInt(`${lanjingLength}`) + parseInt(`${chijingLength}`);
    }
    console.log(checkTab, '我是选中的');
    return (
      <View>
        {['noMember', 'lanjing', 'chijing'].includes(memberCardType) && (
          <View className="checkTab">
            {['noMember', 'lanjing'].includes(memberCardType) ? this.lanjingLeft() : this.chijingLeft()}
            {['chijing'].includes(memberCardType) ? this.lanjingRight() : this.chijingRight()}
          </View>
        )}
        {['shuangchong'].includes(memberCardType) && this.shuangchong()}
        {!['shuangchong'].includes(memberCardType) && (
          <View
            style={{
              height: '26px',
              zIndex: 2,
              marginTop: '-26px',
              background: '#ffffff',
            }}
          ></View>
        )}
        {/* {memberCardType !== 'noMember' && ( */}
        <View className="checkTabStripBox">
          <View
            className={`checkTabStrip checkTabStrip-${selectMemberCard}`}
            onClick={() => {
              if (Taro.getStorageSync('blacklistModel')) {
                action.commonChange('main.blacklistModel', true);
                return;
              }
              Taro.navigateTo({
                url: `/pages/package-D/serviceCentre/index?memberType=${
                  selectMemberCard === 'lanjing' ? 0 : selectMemberCard === 'chijing' ? 1 : 2
                }`,
                // url: '/pages/package-A/benefitsPage/index',
              });
            }}
          >
            <Image src={checkTabStripIcon} className="checkTabStrip-icon" />
            <Text className="checkTabStrip-title">
              {selectMemberCard == memberCardType ? '我的' : ''}
              {memberName}会员特权
            </Text>
            <Text className="checkTabStrip-text1">{memberNum}</Text>
            <Text className="checkTabStrip-text2">项</Text>
            <Image src={checkTabStripTriangle} className="checkTabStrip-triangle" />
          </View>
        </View>
        {/* )} */}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
